const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

// import CleanWebpackPlugin from 'clean-webpack-plugin';
const CleanWebpackPlugin = require('clean-webpack-plugin');

// Create multiple instances
const extractCSS = new ExtractTextPlugin('css/[name]-one.css');
const extractLESS = new ExtractTextPlugin('css/[name]-two.css');

const css_loader = "css-loader?modules&minimize&localIdentName=[path][name]---[local]";//https://github.com/webpack-contrib/css-loader#minimize

const webpackConfig = {
    entry: {
        app: [path.resolve(__dirname, './src/index.js')]
    },
    output: {
        filename: 'js/[name]-[chunkhash].js',
        chunkFilename: 'js/[name]-[chunkhash].js',
        path: path.resolve(__dirname, './dist'),
        publicPath: './',
    },

    module: {
        rules: [
            {
                test: /\.less$/i,
                use: extractCSS.extract([css_loader, 'less-loader'])
            },
            {
                test: /\.jsx?$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['react']
                    }
                }
            }
        ],
    },
    devtool: "#source-map",

    plugins: [
        extractCSS, extractLESS,
        new webpack.HashedModuleIdsPlugin(),
        new CleanWebpackPlugin(path.resolve(__dirname, 'dist')),

        new webpack.optimize.CommonsChunkPlugin({
            names: ['vendor', 'babel'],
            filename: 'js/[name]-[chunkhash].js',
        }),
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, 'src', 'index.html'),
            hash: false,
            filename: 'index.html',
            inject: 'body',
        })
    ],
    stats: "verbose",
}


module.exports = webpackConfig;
